<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getCollectListApi } from "../api/message";
import { delCollectApi } from "../api/message";
import dayjs from "dayjs";

const starList = ref<ICollect[]>([]);

const getCollectList = async () => {
  const res = await getCollectListApi();
  starList.value = res.data;
};

const getFileName = (url: string) => {
  const index = url.lastIndexOf("/");
  return url.substring(index + 1);
};

const delCollect = async (id: number) => {
  await delCollectApi(id);
  await getCollectList();
};

onMounted(() => {
  getCollectList();
});
</script>

<template>
  <VanNavBar
    title="收藏列表"
    left-text="返回"
    left-arrow
    @click-left="$router.back()"
  />
  <div class="starList">
    <div v-for="item in starList" class="starList__item">
      <div class="starList__item-content" v-if="item.type == 0">
        {{ item.message.content }}
      </div>
      <div class="starList__item-img" v-if="item.type == 1">
        <img :src="item.message.content" alt="" />
      </div>
      <div class="starList__item-file" v-if="item.type == 2">
        <a :href="item.message.content" download>{{
          getFileName(item.message.content)
        }}</a>
      </div>
      <div class="starList__item-bottom">
        <div class="starList__item-time">
          {{ dayjs(item.message.createTime).format("YYYY-MM-DD HH:mm:ss") }}
        </div>
        <div class="starList__item-del" @click="delCollect(item.id)">删除</div>
      </div>
    </div>
  </div>
</template>
